<template>
  <div class="index-container">
    <div class="main-header clearfix">
      <el-row>
        <el-col :xs="8"
                :sm="8"
                :md="8"
                :lg="8"
                :xl="8">
          <el-button type="primary"
                     icon="el-icon-plus"
                     class="sureBtn"
                     size="medium"
                     @click="handleAdd"> 添加就诊记录</el-button>
        </el-col>
        <el-col :xs="16"
                :sm="16"
                :md="16"
                :lg="16"
                :xl="16">
          <div class="search fr">
            <div>
              <el-input v-model="searchForm.name"
                        size="medium"
                        placeholder="老人姓名"></el-input>
            </div>
            <div>
              <el-input v-model="searchForm.id_card"
                        size="medium"
                        placeholder="身份证号"></el-input>
            </div>
            <div>
              <el-date-picker v-model="searchForm.start_time"
                              align="right"
                              type="datetime"
                              placeholder="请选择开始时间"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              @change="clear"
                              @clear="clear">
              </el-date-picker>
            </div>
            <div>
              <el-date-picker v-model="searchForm.end_time"
                              align="right"
                              type="datetime"
                              placeholder="请选择结束时间"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              @change="clear"
                              @clear="clear">
              </el-date-picker>
            </div>
            <el-button size="medium"
                       type="primary"
                       icon="el-icon-search"
                       class="fr"
                       @click="handleSearch"> 搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="main-content"
         style="height: calc(100vh - 250px);">
      <main-table :columns="tableColumns"
                  :data="tableList"
                  :loading="loading"
                  :pagination="pagination"
                  wrapper-height="calc(100% - 73px)"
                  height="100%"
                  @getData="fetchTableList">
        <el-table-column slot="status"
                         label="状态"
                         width="250"
                         align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status === 1"
                       size="mini"
                       type="primary">未处理</el-button>
            <el-button v-else-if="scope.row.status === 2"
                       size="mini"
                       type="success">已出库</el-button>
            <el-button v-else-if="scope.row.status === 3"
                       size="mini"
                       type="danger">驳回</el-button>
          </template>
</el-table-column>
      <el-table-column slot="action"
      fixed="right"
      label="操作"
      width="250"
      align="center">
<template slot-scope="scope">
  <el-button size="mini"
             type="primary"
             @click="edit(scope.row)">查看</el-button>
  <el-button v-if="scope.row.status === 1"
             size="mini"
             type="success"
             @click="agree(scope.row)">出库</el-button>
  <el-button v-if="scope.row.status === 1"
             size="mini"
             type="danger"
             @click="removeModel(scope.row)">驳回</el-button>
</template>
</el-table-column>
      </main-table>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="700px">
      <visit-add v-if="dialogVisible" :data="ruleForm" @cancle="dialogVisible = false" @load="load"></visit-add>
    </el-dialog>

    <el-dialog
      title="就诊记录信息"
      :visible.sync="dialogInfoVisible"
      :close-on-click-modal="false"
      width="700px">
      <visit-info v-if="dialogInfoVisible" :data="ruleForm" @cancle="dialogInfoVisible = false"></visit-info>
    </el-dialog>

    <el-dialog title="药品出库"
    :visible.sync="isShowAgreeModel"
    :close-on-click-modal="false"
    width="500px">
<el-form ref="ruleForms"
    :model="ruleForms"
    :rules="rules"
    label-width="100px"
    class="demo-ruleForm">
<el-form-item label="医生"
           prop="doctor">
<el-input v-model="ruleForms.doctor"></el-input>
</el-form-item>
<el-form-item label="备注"
           prop="note">
<el-input v-model="ruleForms.note"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary"
          @click="submitForm('ruleForms')">立即创建</el-button>
</el-form-item>
</el-form>
</el-dialog>

<el-dialog title="取消出库"
:visible.sync="isShowRemove"
:close-on-click-modal="false"
width="500px">
<el-form ref="ruleForms"
:model="ruleForms"
:rules="rules"
label-width="100px"
class="demo-ruleForm">
<el-form-item label="医生"
prop="doctor">
<el-input v-model="ruleForms.doctor"></el-input>
</el-form-item>
<el-form-item label="备注"
prop="note">
<el-input v-model="ruleForms.note"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary"
@click="remove('ruleForms')">驳回</el-button>
</el-form-item>
</el-form>
</el-dialog>
  </div>
</template>
<script>
import mainTable from "@/components/main-table/index";
import * as APIMedicalCareDisease from "@/api/medicalCareDisease";
import visitAdd from "./components/visit-add";
import visitInfo from "./components/visit-info";
import { age, unixToDate } from "@/utils";
export default {
  name: "MedicineDisease3Visit",
  components: {
    mainTable,
    visitAdd,
    visitInfo,
  },
  data() {
    return {
      loading: false,
      title: "添加图标",
      dialogVisible: false,
      dialogInfoVisible: false,
      isShowAgreeModel: false,
      isShowRemove: false,
      ruleForm: {},
      searchForm: {
        page: 1,
      },
      ruleForms: {
        id: "",
        note: "",
        doctor: "",
      },
      rules: {
        doctor: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        note: [{ required: true, message: "请选择活动区域", trigger: "blur" }],
      },
      tableList: [],
      pagination: {
        current: 1,
        size: 10,
        total: 0,
      },
      tableColumns: [
        {
          index: true,
          fixed: true,
        },
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "sex",
          label: "性别",
          formatter(row, column, cellValue) {
            if (cellValue == 1) {
              return "男";
            } else if (cellValue == 2) {
              return "女";
            }
          },
        },
        {
          prop: "age",
          label: "年龄",
        },
        {
          prop: "id_card",
          label: "身份证号",
        },
        {
          prop: "doc_name",
          label: "医师",
        },
        {
          prop: "time",
          label: "就诊时间",
          width: 190,
          formatter(row, column, cellValue) {
            if (cellValue) {
              return unixToDate(cellValue);
            }
          },
        },
        {
          prop: "create_time",
          label: "添加时间",
          width: 190,
          formatter(row, column, cellValue) {
            return unixToDate(cellValue);
          },
        },
        {
          slot: "status",
        },
        {
          slot: "action",
        },
      ],
      key: Math.random(),
    };
  },

  mounted() {
    this.fetchTableList();
  },
  methods: {
    load() {
      this.fetchTableList();
    },
    // 手动清空/搜索
    clear() {
      this.fetchTableList({ page: 1 });
    },
    handleSearch() {
      this.pagination = {
        current: 1,
        size: 10,
        total: 0,
      };
      this.fetchTableList({ page: 1 });
    },
    fetchTableList(pageObj) {
      this.loading = true;
      this.searchForm = {
        ...this.searchForm,
        ...pageObj,
      };
      APIMedicalCareDisease.jiuzhenmanIndex(this.searchForm)
        .then((resp) => {
          if (resp.code == 200) {
            const { list = [], total = 0 } = resp.data;
            this.tableList = list || [];
            console.log(this.tableList);
            this.pagination.total = total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    edit(row) {
      this.key = Math.random();
      this.ruleForm = { ...row };
      this.dialogInfoVisible = true;
    },
    handleAdd() {
      this.title = "添加就诊记录";
      this.dialogVisible = true;
      this.key = Math.random();
      this.ruleForm = { name: "", sort: 1 };
    },
    cancelOrder(row) {
      this.$confirm("确定删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          APIMedicalCareDisease.jiuzhenmanDelete({ id: row.id }).then(
            (resp) => {
              if (resp.code === 200) {
                this.$message({ type: "success", message: "删除成功!" });
                this.fetchTableList();
              }
            }
          );
        })
        .catch(() => {});
    },
    agree(item) {
      this.isShowAgreeModel = true;
      this.ruleForms.id = item.id;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            id: this.ruleForms.id,
            note: this.ruleForms.note,
            doctor: this.ruleForms.doctor,
          };
          console.log(data)
          APIMedicalCareDisease.agreeRemove(data).then((res) => {
            if (res.code == 200) {
              this.ruleForms = {
                id: "",
                note: "",
                doctor: "",
              };
              this.isShowAgreeModel=false;
              this.fetchTableList()
              this.$message.success("出库成功");

            }
          });
        } else {
          this.$message("清输入正确的信息");
        }
      });
    },
    removeModel(item){
      this.isShowRemove = true;
      this.ruleForms.id = item.id;
    },
    remove(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            id: this.ruleForms.id,
            note: this.ruleForms.note,
            doctor: this.ruleForms.doctor,
          };
          APIMedicalCareDisease.removeDisagree(data).then((res) => {
            if (res.code == 200) {
              this.ruleForms = {
                id: "",
                note: "",
                doctor: "",
              };
              this.isShowRemove=false;
              this.fetchTableList()
              this.$message.success("驳回成功");
            }
          });
        } else {
          this.$message("清输入正确的信息");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.index-container {
  box-sizing: border-box;
  width: 100%;
  padding: 0 30px !important;
  margin: 0 !important;
  background: #fff !important;

  .main-header {
    padding-top: 4px;
    margin-bottom: 24px;

    .search {
      display: inline-block;

      .search-title {
        flex: 0 0 48px;
        width: 48px;
        font-size: 16px;
        line-height: 36px;
        color: #333;
      }
    }

    .search > div {
      display: inline-block;
      margin-left: 20px;
    }
  }
  .task-icon-img {
    width: 80px;
    height: 80px;
  }
}

.form-footer {
  padding-left: 100px;
}

.dialog-main {
  .table-do {
    margin-bottom: 15px;
  }

  ::v-deep {
    th {
      .cell {
        color: #fff;
      }
    }
  }
}
</style>
